<?php
include "header.php";
//echo "<pre>";print_r($data);exit;
?> 
	<div id="slot1" style="float:left">
	<input type="text" name="setA_slot1_title" id="setA_slot1_title" value="<?php echo $data->setA_slot1_title;?>"/><span id="setA_slot1_title_count"></span><br/>
	<input type="file" id="setA_slot1_image" name="setA_slot1_image" onchange="changeEvent(this,'slot1')"/>
	<br/>
	<p id="uploaderr_slot1"></p>
	<br>
	<?php if($data!='' && $data->setA_slot1_image!=''){?>
	<div id="setA_slot1_image_preview"><img src="<?php echo $data->setA_slot1_image;?>"/></div>
	<?php }else{?>
	<div id="setA_slot1_image_preview"></div>
	<?php } ?>
	</div>
	<div id="slot2"  style="float:right">
	<input type="text" name="setA_slot2_title" id="setA_slot2_title" value="<?php echo $data->setA_slot2_title;?>"/><span id="setA_slot2_title_count"></span><br/>
	<input type="file" id="setA_slot2_image" name="setA_slot2_image" onchange="changeEvent(this,'slot2')"/>
	<br/>
	<p id="uploaderr_slot2"></p>
	<br>
	<?php if($data!='' && $data->setA_slot2_image!=''){?>
	<div id="setA_slot2_image_preview"><img src="<?php echo $data->setA_slot2_image;?>"/></div>
	<?php }else{?>
	<div id="setA_slot2_image_preview"></div>
	<?php } ?>
	</div><div style="clear:both"></div>
	<div id="slot3" style="float:left">
	<input type="text" name="setA_slot3_title" id="setA_slot3_title" value="<?php echo $data->setA_slot3_title;?>" /><span id="setA_slot3_title_count"></span><br/>
	<input type="file" id="setA_slot3_image" name="setA_slot3_image" onchange="changeEvent(this,'slot3')"/>
	<br/>
	<p id="uploaderr_slot3"></p>
	<br>
	<?php if($data!='' && $data->setA_slot3_image!=''){?>
	<div id="setA_slot3_image_preview"><img src="<?php echo $data->setA_slot3_image;?>"/></div>
	<?php }else{?>
	<div id="setA_slot3_image_preview"></div>
	<?php } ?>
	</div>
	<div id="slot4" style="float:right">
	<input type="text" name="setA_slot4_title" id="setA_slot4_title" value="<?php echo $data->setA_slot4_title;?>"/><span id="setA_slot4_title_count"></span><br/>
	<input type="file" id="setA_slot4_image" name="setA_slot4_image" onchange="changeEvent(this,'slot4')"/>
	<br/>
	<p id="uploaderr_slot4"></p>
	<br>
	<?php if($data!='' && $data->setA_slot4_image!=''){?>
	<div id="setA_slot4_image_preview"><img src="<?php echo $data->setA_slot4_image;?>"/></div>
	<?php }else{?>
	<div id="setA_slot4_image_preview"></div>
	<?php } ?>
	</div>
	</div>
	</div><div style="clear:both"></div>
	<button onclick="saveDetails();">Update and Active</button>
</div>
<?php
include "footer.php";
?> 
<script type="text/javascript">
(function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on("keyup focus", function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var chars = src.value.length;
                if (chars > limit) {
                    src.value = src.value.substr(0, limit);
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);
var slot1 = $("#setA_slot1_title_count");
var slot2 = $("#setA_slot2_title_count");
var slot3 = $("#setA_slot3_title_count");
var slot4 = $("#setA_slot4_title_count");
$("#setA_slot1_title").limiter(title_max_length, slot1);
$("#setA_slot2_title").limiter(title_max_length, slot2);
$("#setA_slot3_title").limiter(title_max_length, slot3);
$("#setA_slot4_title").limiter(title_max_length, slot4);
function readImage(file,slot,event) {
	
    var reader = new FileReader();
    var image  = new Image();

    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
	
        image.src    = _file.target.result;              // url.createObjectURL(file);
        image.onload = function() {
            var w = this.width,
                h = this.height,
                t = file.type,                           // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~(file.size/1024) +'KB';
				if(setA_image_height==h && setA_image_width==w)
				{
				$('#uploaderr_slot'+slot).html("");
				$('#setA_'+slot+'_image_preview').html('<img id="setA_'+slot+'_image_src" src="'+ this.src +'">');
				}else{
				$('#uploaderr_'+slot).html("image dimentions (height x width) should be "+setA_image_height+" x "+setA_image_width);
				}
			
        };
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        };      
    };

}
function changeEvent(event,slot)
{
	  if(event.disabled) return alert('File upload not supported!');
    var F = event.files;
    if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] ,slot,event);
}
function saveDetails()
{
	var setA_slot1_image=$('#setA_slot1_image_src').attr('src');
	var setA_slot2_image=$('#setA_slot2_image_src').attr('src');
	var setA_slot3_image=$('#setA_slot3_image_src').attr('src');
	var setA_slot4_image=$('#setA_slot4_image_src').attr('src');
	var setA_slot1_title=$('#setA_slot1_title').val();
	var setA_slot2_title=$('#setA_slot2_title').val();
	var setA_slot3_title=$('#setA_slot3_title').val();
	var setA_slot4_title=$('#setA_slot4_title').val();
	$.ajax({
			type		:	'POST',
			url			:  	"process.php",
			dataType	: 	"json",
			data		:	{
			setA_slot1_image:setA_slot1_image,
			setA_slot2_image:setA_slot2_image,
			setA_slot3_image:setA_slot3_image,
			setA_slot4_image:setA_slot4_image,
			setA_slot1_title:setA_slot1_title,
			setA_slot2_title:setA_slot2_title,
			setA_slot3_title:setA_slot3_title,
			setA_slot4_title:setA_slot4_title,
			active_set:"SetA"
			},
			success: function(data){
			alert("Settings successfully updated");
			}
		});
	
}
</script>